<template>
  <div class="f-box">
    <div class="content" v-for="(item, index) in list" :key="index">
      <h3>{{ item.month }}</h3>
      <ul class="content-box">
        <li v-for="it in item.articles" :key="it.id" @click="jumpOne(it.id)">
          <div class="img">
            <img :src="it.titleImage" alt="" />
          </div>
          <div class="text">
            <p>{{ it.title }}</p>
            <p><i class="el-icon-bank-card"></i> {{ it.createTime }}</p>
          </div>
        </li>
      </ul>
    </div>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="10"
      @current-change="handleCurrent"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      total: 0,
    };
  },
  created() {
    this.seek();
    this.indexList();
  },
  methods: {
    seek() {
      this.$emit("back", [false, false]);
    },
    indexList() {
      this.$axios
        .post("http://47.104.167.34:9110/api/archive/list", {
          current: this.page,
          size: 10,
        })
        .then((res) => {
          this.list = res.data.data;
          this.total = res.data.total;
          // console.log(res, "987654");
          // console.log(this.list, "列表");
          // console.log(this.total, "总页数");
        });
    },
    //跳转
    jumpOne(a) {
      this.$router.push({
        name: "oneChild", //用params时此处只能用name跳转
        query: {
          articleId: a,
        },
      });
    },
    //分页
    handleCurrent(v) {
      // console.log(v)
      this.page = v;
      this.indexList();
    },
  },
};
</script>

<style scoped>
.content {
  padding: 20px;
  margin-bottom: 20px;
  background-color: white;
}
.content-box {
  margin-top: 10px;
  width: 100%;
}
.content-box > li {
  border-bottom: 1px solid #80808052;
  padding: 10px;
  display: flex;
}
.img {
  width: 100px;
  border-radius: 5px;
  height: 50px;
  overflow: hidden;
}
.img > img {
  width: 100%;
  height: 100%;
}
.text {
  margin-left: 20px;
  width: 200px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text > p:nth-child(2) {
  font-size: 12px;
}
</style>